<template lang="pug">
.detail
  .detail-container
    .detail-title {{detail.title}}
    .detail-info
      span {{detail.author}}
      span(v-if="detail.postTime") {{new Date(detail.postTime).format('yyyy-MM-dd hh:mm')}}
      span(v-else) {{new Date().format('yyyy-MM-dd hh:mm')}}
    .detail-content
      .detail-content-video
        video(:src="detail.fileUrl" controls)
      .detail-content-container.ql-editor(v-html="detail.content")
    .detail-materials
      .material-title 相关材料
      .material-item(v-for="item in detail.materialList")
        .material-item-img(:style="`background-image: url(${item.picImg})`")
        .material-item-bd
          .material-item-name {{item.materialName}}
          .material-item-area {{item.minMarketPrice === item.maxMarketPrice ? '¥' + item.minMarketPrice + '/' + item.unit : '¥' + item.minMarketPrice + '~' + item.maxMarketPrice + '/' + item.unit }}
          .material-item-brand {{item.brandName}}
          .material-item-company {{item.supplierName}}
</template>

<script>
import { getArticleDetail } from 'api'
export default {
  name: 'previewVideo',
  data () {
    return {
      articleId: '',
      detail: {}
    }
  },
  computed: {
    detailParams () {
      if (this.$route.params.id) {
        return {}
      } else {
        let params = localStorage.getItem('previewParams')
        if (params) return JSON.parse(params)
        else {}
      }
    }
  },
  methods: {
    async getDetail () {
      try {
        const { ResultSet } = await this.$axios.post(getArticleDetail, { articleId: this.articleId })
        this.detail = ResultSet.userData.detail
      } catch (err) {
        this.$message.error(err.message || err.ResultSet.errors)
      }
    }
  },
  mounted () {
    if (!this.$route.params.id) this.detail = this.detailParams
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (to.params.id) {
        vm.articleId = to.params.id
        vm.getDetail()
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.detail {
  min-height: 100vh;
  padding: 20px 0;
  background: #fff;
}
.detail-container {
  width: 677px;
  margin: 0 auto;
  padding: 20px 0;
}
.detail-title {
  font-size: 25px;
  color: #353535;
  padding: 0 20px;
}
.detail-info {
  display: flex;
  align-items: center;
  margin-top: 15px;
  font-size: 15px;
  color: #999;
  padding: 0 20px;
  span {
    display: inline-block;
    margin-right: 60px;
  }
}
.detail-content {
  padding: 0 20px;
  .detail-content-video {
    padding: 25px 0;
  }
  .detail-content-container {
    padding: 25px 0;
    border-bottom: 1px solid #DCDFE6;
  }
}
.material-title {
  padding: 25px 12px;
  font-size: 17px;
  line-height: 22px;
  color: #353535;
}
.material-item {
  padding: 5px 12px;
  display: flex;
  align-items: center;
  .material-item-img {
    width: 150px;
    height: 150px;
    border-radius: 6px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .material-item-bd {
    padding-left: 24px;
    flex: 1;
    overflow: hidden;
  }
  .material-item-title {
    font-size: 16px;
    color: #363636;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .material-item-area,
  .material-item-brand,
  .material-item-company {
    margin-top: 18px;
    font-size: 15px;
    color: #999;
  }
}
</style>